<template>
  <div>
    <div ref="mapCity" :class="className" :style="{height:height,width:width}" />
  </div>
</template>
<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "460px"
    },
    provinces: {
      type: Array,
      default: () => []
    }
    // province: {
    //   type: String,
    //   default: ''
    // },
    // cityMapData: {
    //   type: Array,
    //   default: () => []
    // }
  },
  data() {
    return {
      chart: null,
      province: ""
    };
  },
  computed: {
    filterlabelname() {
      if (!this.provinces.length) return;
      var label = "";
      this.provinces.map((item, index) => {
        if (this.provinces[index].pinyin === this.province) {
          label = this.provinces[index].name;
        }
      });
      return label;
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart(province, data) {
      if (!province && !data && !data.length) return;
      this.province = province;
      const provincetext = this.filterlabelname;
      require(`echarts/map/js/province/${this.province}`);

      this.chart = echarts.init(this.$refs.mapCity);

      var seriesDataPro = [];
      // 指定省份鼠标滑过整体高亮显示，如果不需要可以删掉相关代码
      var combineCity = [
        {
          name: "beijing",
          data: ["怀柔区", "密云区", "昌平区", "顺义区", "平谷区", "门头沟区", "海淀区", "石景山区", "西城区", "东城区", "朝阳区", "大兴区", "房山区", "丰台区", "延庆区", "通州区"]
        },
        {
          name: "tianjin",
          data: [
          "和平区",
          "河东区",
          "河西区",
          "南开区",
          "河北区",
          "红桥区",
          "东丽区",
          "西青区",
          "津南区",
          "北辰区",
          "武清区",
          "宝坻区",
          "滨海新区",
          "宁河区",
          "静海区",
          "蓟州区"]
        },
        {
          name: "shanghai",
          data: [
          "黄浦区",
          "徐汇区",
          "长宁区",
          "静安区",
          "普陀区",
          "虹口区",
          "杨浦区",
          "闵行区",
          "宝山区",
          "嘉定区",
          "浦东新区",
          "金山区",
          "松江区",
          "青浦区",
          "奉贤区",
          "崇明区"]
        },
        {
          name: "chongqing",
          data: [
          "涪陵区",
          "万州区",
          "渝中区",
          "大渡口区",
          "江北区",
          "沙坪坝区",
          "九龙坡区",
          "南岸区",
          "北碚区",
          "綦江区",
          "大足区",
          "渝北区",
          "巴南区",
          "黔江区",
          "长寿区",
          "江津区",
          "合川区",
          "永川区",
          "南川区",
          "铜梁区",
          "璧山区",
          "潼南区",
          "荣昌区",
          "梁平县",
          "城口县",
          "丰都县",
          "垫江县",
          "武隆县",
          "忠县",
          "云阳县",
          "奉节县",
          "巫山县",
          "巫溪县",
          "石柱土家族自治县",
          "秀山土家族苗族自治县",
          "酉阳土家族苗族自治县",
          "彭水苗族土家族自治县",
          "开州区"]
        },
        {
          name: "xianggang",
          data: [
          "中西区",
          "湾仔区",
          "东区",
          "南区",
          "油尖旺区",
          "深水埗区",
          "九龙城区",
          "黄大仙区",
          "观塘区",
          "荃湾区",
          "屯门区",
          "元朗区",
          "北区",
          "大埔区",
          "西贡区",
          "沙田区",
          "葵青区",
          "离岛区"]
        },
        {
          name: "aomen",
          data: ["花地玛堂区","花王堂区","望德堂区","大堂区","风顺堂区","嘉模堂区","路凼填海区","圣方济各堂区"]
        },
        {
          name: "taiwan",
          data: ["高雄市", "屏东县", "台南市", "新竹市", "新竹县", "宜兰县", "基隆市","苗栗县","台北市","新北市","桃园市","彰化县","嘉义县","嘉义市","花莲县","南投县","台中市","云林县","台东县","澎湖县","金门县","连江县","中国属钓鱼岛"]
        }
      ]

      for(let j = 0, len = combineCity.length;j < len;j++){
        if(this.province === combineCity[j].name){
          let temp = [];
          for (let i = 0, combineLen = combineCity[j].data.length; i < combineLen; i++) {
            var arr = {};
            arr["name"] = combineCity[j].data[i];
            arr["value"] = data[0].value;
            arr["ratio"] = data[0].ratio;
            temp.push(arr);
          }
          seriesDataPro = temp
        }
      }

      if(!seriesDataPro.length) {
        seriesDataPro = data
      }
      
      var max = Math.max.apply(
        Math,
        data.map(function(o) {
          return o.value;
        })
      );
      var min = 0; // 侧边最大值最小值

      var self = this;
      this.chart.setOption({
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            // 鼠标滑过显示的数据
            if (params.value) {
              var toolTiphtml = "";
              for (var i = 0; i < seriesDataPro.length; i++) {
                if (self.province.indexOf("beijing") > -1) {
                  toolTiphtml =
                    "北京：" +
                    seriesDataPro[i].value +
                    "（" +
                    seriesDataPro[i].ratio +
                    "%）";
                } else if (self.province.indexOf("tianjin") > -1) {
                  toolTiphtml =
                    "天津" +
                    "：" +
                    seriesDataPro[i].value +
                    "（" +
                    seriesDataPro[i].ratio +
                    "%）";
                } else if (self.province.indexOf("shanghai") > -1) {
                  toolTiphtml =
                    "上海" +
                    "：" +
                    seriesDataPro[i].value +
                    "（" +
                    seriesDataPro[i].ratio +
                    "%）";
                } else if (self.province.indexOf("chongqing") > -1) {
                  toolTiphtml =
                    "重庆：" +
                    seriesDataPro[i].value +
                    "（" +
                    seriesDataPro[i].ratio +
                    "%）";
                } else if (self.province.indexOf("xianggang") > -1 ) {
                   toolTiphtml = 
                    "香港：" +
                    seriesDataPro[i].value +
                    "（" +
                    seriesDataPro[i].ratio +
                    "%）";
                } else if (self.province.indexOf("aomen") > -1 ) {
                   toolTiphtml = 
                    "澳门：" +
                    seriesDataPro[i].value +
                    "（" +
                    seriesDataPro[i].ratio +
                    "%）";
                } else if (self.province.indexOf("taiwan") > -1 ) {
                   toolTiphtml = 
                    "台湾：" +
                    seriesDataPro[i].value +
                    "（" +
                    seriesDataPro[i].ratio +
                    "%）";
                } else if (params.name === seriesDataPro[i].name) {
                  toolTiphtml =
                    seriesDataPro[i].name +
                    "：" +
                    seriesDataPro[i].value +
                    "（" +
                    seriesDataPro[i].ratio +
                    "%）";
                }
              }
              return toolTiphtml;
            } else {
              return params.name;
            }
          }
        },
        visualMap: {
          // 视觉映射组件
          show: true,
          min: min,
          max: max, // 侧边滑动的最大值，从数据中获取
          left: "2%", // center
          inverse: false, // 是否反转 visualMap 组件
          itemWidth: 16, // 图形的宽度，即长条的宽度
          itemHeight: 120, // 图形的高度，即长条的高度
          // text: ['高', '低'], // 文本，默认为数值文本
          calculable: false, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
          seriesIndex: 1, // 指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
          orient: "vertical", // horizontal
          inRange: {
            color: ["#dbfefe", "#1066d5"] // 蓝绿
          }
        },
        geo: {
          show: true,
          map: provincetext,
          roam: false,
          left: "center",
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#3c8dbc", // 没有值得时候颜色
              borderColor: "#097bba"
            },
            emphasis: {
              areaColor: "#fbd456" // 鼠标滑过选中的颜色
            }
          }
        },
        series: [
          {
            name: "散点",
            type: "scatter",
            coordinateSystem: "geo",
            data: seriesDataPro,
            symbolSize: "1",
            label: {
              normal: {
                show: true,
                formatter: "{b}",
                position: "right"
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                // show: false,
                color: "#895139" // 字体颜色
              }
            }
          },
          {
            name: this.province,
            type: "map",
            mapType: provincetext, // required
            roam: false, // 是否开启鼠标缩放和平移漫游
            data: seriesDataPro,
            left: "center", // 组件距离容器的距离 3%
            // geoIndex: 0,
            // aspectScale: 0.75,       //长宽比
            // showLegendSymbol: false, // 存在legend时显示
            // selectedMode: 'single',
            label: {
              normal: {
                show: false, // 显示省份标签
                textStyle: {
                  color: "#895139"
                } // 省份标签字体颜色
              },
              emphasis: {
                show: false, // 对应的鼠标悬浮效果
                textStyle: {
                  color: "#323232"
                }
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 0.5, // 区域边框宽度
                borderColor: "#0550c3", // 区域边框颜色
                areaColor: "#0b7e9e" // 区域颜色
              },
              emphasis: {
                borderWidth: 0.5,
                borderColor: "#4b0082",
                areaColor: "#ece39e"
              }
            }
          }
        ]
      });

      this.chart.on("mouseover", function(params) {
        if (
          params.seriesName === "beijing" ||
          params.seriesName === "tianjin" ||
          params.seriesName === "shanghai" ||
          params.seriesName === "chongqing" || params.seriesName === "xianggang"
          || params.seriesName === "aomen" || params.seriesName === "taiwan"
        ) {
          self.chart.dispatchAction({
            type: "highlight"
          });
        }
      });
      this.chart.on("mouseout", function(params) {
        if (
          params.seriesName === "beijing" ||
          params.seriesName === "tianjin" ||
          params.seriesName === "shanghai" ||
          params.seriesName === "chongqing" || params.seriesName === "xianggang"
          || params.seriesName === "aomen" || params.seriesName === "taiwan"
        ) {
          self.chart.dispatchAction({
            type: "downplay"
          });
        }
      });
    }
  }
};
</script>

